<template>
  <div class="charge-off-detail-top">
    <Title :title="'流水详情'" />
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage ? 'left' : 'right'"
      class="inner-info lineHeight32"
      style="padding-left:12px;margin-top:6px;"
      label-width="98px"
    >
      <el-row :gutter="8" class="response-el-row">
        <el-col :span="8">
          <el-form-item label="收入金额:">
            <div class="flex-center">
              <div
                v-if="writeOffDetail.orderList.incomeAmount"
                style="display:flex"
                class="blue-text"
              >¥<PriceColumn :real-val="writeOffDetail.orderList.incomeAmount" :price="writeOffDetail.orderList.incomeAmount / 100" class="blue-text"/>
              </div>
              <span v-else>¥0</span>
              <div v-if="!showMobilePage" class="line"/>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="可核销金额:">
            <div class="flex-center">
              <PriceColumn :real-val="writeOffDetail.orderList.writeOffAmount" :price="writeOffDetail.orderList.writeOffAmount / 100" class="blue-text"/>
              <div v-if="!showMobilePage" class="line"/>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="无需核销金额:" label-width="100px">
            <PriceColumn :real-val="writeOffDetail.orderList.noWriteOffAmount" :price="writeOffDetail.orderList.noWriteOffAmount / 100" class="blue-text"/>
            <span v-if="hasRouteAuth('crm:finance:setNoWriteOffAmount')" class="link set" @click="handleSetNoWriteOff">设置</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款人名称:">
            <el-tooltip
              v-if="writeOffDetail.orderList && writeOffDetail.orderList.payName"
              placement="top"
              effect="dark"
            >
              <div
                slot="content"
                style="max-width: 200px;"
              >{{ writeOffDetail.orderList | showString('payName') }}</div>
              <span class="overflow">{{ writeOffDetail.orderList | showString('payName') }}</span>
            </el-tooltip>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款方式:" >
            <div>
              {{ writeOffDetail.orderList | showString('clientType') }}
              <span
                v-if="(writeOffDetail.orderList.payWayStr || writeOffDetail.orderList.payWayStr === 0)"
              >/ {{ writeOffDetail.orderList.payWayStr }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属部门:" label-width="100px">
            <el-tooltip
              v-if="writeOffDetail.orderList && writeOffDetail.orderList.departmentName"
              placement="top"
              effect="dark"
            >
              <div
                slot="content"
                style="max-width: 200px;"
              >{{ writeOffDetail.orderList.departmentName }}</div>
              <span class="overflow">{{ writeOffDetail.orderList.departmentName }}</span>
            </el-tooltip>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="到账日期:">
            <div class="form-content">{{ writeOffDetail.orderList | showString('arrivalTime') }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交易单号:">
            <el-tooltip
              v-if="writeOffDetail.orderList && writeOffDetail.orderList.transactionNumber"
              placement="top"
              effect="dark"
            >
              <div
                slot="content"
                style="max-width: 200px;"
              >{{ writeOffDetail.orderList.transactionNumber }}</div>
              <span class="overflow">{{ writeOffDetail.orderList.transactionNumber }}</span>
            </el-tooltip>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流水单号:" label-width="100px">
            <el-tooltip
              v-if="writeOffDetail.orderList && writeOffDetail.orderList.flowNumber"
              placement="top"
              effect="dark"
            >
              <div
                slot="content"
                style="max-width: 200px;"
              >{{ writeOffDetail.orderList.flowNumber }}</div>
              <span class="overflow">{{ writeOffDetail.orderList.flowNumber }}</span>
            </el-tooltip>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款账号:">
            <SecretText
              v-if="writeOffDetail.orderList"
              :log-text="`财务流水${writeOffDetail.orderList.flowNumber}的付款账号`"
              :origin-text="writeOffDetail.orderList.payNumber" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="封账状态:">{{ writeOffDetail.orderList.sealingState | setSealBillType }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人:" label-width="100px">
            <CheckUserInfo v-if="writeOffDetail.orderList && writeOffDetail.orderList.createName" :label="writeOffDetail.orderList.createName" :user-id="writeOffDetail.orderList.creatorId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型:">{{ writeOffDetail.orderList.flowType | flowTypeFilter }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="核销状态:">{{ writeOffDetail.orderList.verificationState | setVerificationState }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <SetNoWriteOff ref="noWriteOff" v-model="writeOffDetail.noWriteOffAmount" @update="updateDetail"/>
  </div>
</template>
<script>
import Title from '@/components/Title';
import SetNoWriteOff from './SetNoWriteOff';
import { showString } from '@/filters/showString';
import { setSealBillType, clientType, setVerificationState } from '@/filters/status';
import { hasRouteAuth } from '@/utils/permission';

export default {
  components: { Title, SetNoWriteOff },
  filters: {
    showString,
    setSealBillType,
    clientType,
    setVerificationState,
    flowTypeFilter(val) {
      // 流水类型。0:普通 1:对抵
      let text = '--';
      switch (val) {
        case 0:
          text = '普通';
          break;
        case 1:
          text = '对抵';
          break;
      }
      return text;
    }
  },
  props: {
    writeOffDetail: {
      type: Object,
      default: () => {
        return {};
      }
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    hasRouteAuth,
    handleSetNoWriteOff() {
      this.$refs.noWriteOff && this.$refs.noWriteOff.openDialog(this.writeOffDetail.orderList.noWriteOffAmount, this.writeOffDetail.orderList.writeOffAmount);
    },
    updateDetail() {
      this.$emit('updateDetail');
    }
  }
};
</script>
<style lang="scss" scoped>
.charge-off-detail-top {
  .inner-info {
    margin-bottom: 26px;
    &::v-deep {
      .el-form-item__content {
        display: flex;
        color: #333;
      }
      .el-form-item {
        margin-bottom: 0px;
        .el-form-item__label {
          color: #999;
        }
        .set{
          margin-left: 10px;
        }
      }
    }
  }
  .overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .el-col {
    .el-form-item {
      border-right: 1px solid #eee;
    }
  }
  .el-col:nth-child(3n) {
    .el-form-item {
      border-right: none;
    }
  }
  .el-col:nth-child(1), .el-col:nth-child(2), .el-col:nth-child(3) {
    background-color: #fafbff;
    margin-top: 8px;
    margin-bottom: 4px;
    &::v-deep {
      .el-form-item {
        border-right: none;
        .el-form-item__label {
          color: #333;
          font-weight: bold;
        }
        .blue-text {
          color: #5f77c3;
          font-weight: 700;
        }
        .flex-center {
          width: 100%;
          justify-content: space-between;
        }
        .line{
          height: 20px;
          width: 1px;
          border-right: 1px solid #e6edff;
        }
      }
    }
  }
  .el-col:nth-child(1) {
    border: 1px solid #e6edff;
    border-right: none;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  .el-col:nth-child(2) {
    border-top: 1px solid #e6edff;
    border-bottom: 1px solid #e6edff;
  }
  .el-col:nth-child(3) {
    border: 1px solid #e6edff;
    border-left: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
}
.mobile-el-form {
  .el-col {
    .el-form-item {
      border-right: none;
    }
  }
  .el-col:nth-child(1), .el-col:nth-child(2), .el-col:nth-child(3) {
    &::v-deep {
      border: 1px solid #e6edff;
      border-right: 1px solid #e6edff !important;
      border-radius: 8px;
    }
  }
}
</style>
